<template>
  <div>
    <my-search
      :layout="formItems"
      :model="searchModel"
      :form-conf="searchConf"
      :btn-conf="searchBtnConf"
      class="myLayoutTop mySearch"
      @btnClick="mySearchBtnClick"
    ></my-search>
    <my-table
      :data="tableData"
      :columns="tableColumns"
      :opt-conf="tableOptConf"
      :btn-conf="tableBtnConf"
      class="myLayoutCenter"
      @optClick="myTableOptClick"
      @btnClick="myTableBtnClick"
      @currentChange="currentChange"
      @sizeChange="sizeChange"
    ></my-table>
    <el-dialog
      :visible.sync="dialogConf.show"
      :width="dialogConf.width"
      @closed="closed"
    >
      <template #title>
        <div class="dialogTitle">{{ dialogConf.title }}</div>
      </template>
      <my-form
        ref="addForm"
        :layout="elRows"
        :model="addModel"
        :form-conf="formConf"
        :btn-conf="addBtnConf"
        @btnClick="addBtnClick"
      >
      </my-form>
    </el-dialog>
  </div>
</template>

<script>
import { delFormNullParam } from '../../../components/common/common'
import MyTable from '@/components/base/myTable'
import MySearch from '@/components/base/mySearch'
import MyForm from '@/components/base/myForm'
import menu from '@/components/mixins/menu'

export default {
  name: 'Table',
  components: { MyForm, MySearch, MyTable },
  mixins: [menu],
  layout: 'Admin',
  data() {
    return {
      searchModel: {
        name: null
      },
      addModel: {
        name: null,
        content: null
      },
      formRowConf: {
        gutter: 20,
        type: 'flex',
        justify: 'start',
        align: 'middle'
      },
      addBtnConf: {
        buttons: [
          { name: '提交', type: 'primary' },
          { name: '重置', callback: false },
          { name: '取消' }
        ]
      },
      formConf: {
        labelWidth: '100px',
        rules: {
          name: [
            { required: true, message: '请输入模板名称', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入模板代码', trigger: 'blur' }
          ]
        }
      },
      searchConf: {
        labelSuffix: null,
        inline: true,
        labelWidth: '1px'
      },
      searchBtnConf: {
        buttons: [{ name: '查询', type: 'primary' }]
      },
      formItems: [
        {
          elFormItem: {
            prop: 'name',
            label: '',
            type: 'input',
            placeholder: '请输入数据库别名'
          }
        }
      ],
      elRows: [
        {
          elCols: [
            {
              span: 12,
              elFormItem: {
                prop: 'name',
                label: '模板名称',
                type: 'input'
              }
            }
          ]
        },
        {
          elCols: [
            {
              span: 23,
              elFormItem: {
                prop: 'content',
                label: '模板代码',
                type: 'textarea',
                autosize: { minRows: 6, maxRows: 10 }
              }
            }
          ]
        }
      ],
      tableData: { records: [] },
      tableColumns: [
        { label: '序号', type: 'index' },
        { prop: 'tableName', label: '表名' },
        { prop: 'tableComment', label: '注释', showOverflowTooltip: true },
        { prop: 'engine', label: '引擎' },
        { prop: 'createTime', label: '创建时间' },
        { prop: 'updateTime', label: '最后一次更新时间' }
      ],
      tableOptConf: {
        optShow: true,
        buttons: [{ name: '代码生成' }]
      },
      tableBtnConf: {
        show: false,
        buttons: [{ name: '代码生成' }]
      },
      dialogConf: { show: false, title: '新增', width: '800px' },
      page: {
        current: 1,
        size: 10
      }
    }
  },
  created() {
    this.routerQuery = this.$route.query
    this.searchModel.name = this.routerQuery.name
    if (this.searchModel.name != null) {
      this.mySearchBtnClick()
    }
  },
  mounted() {},
  methods: {
    myTableBtnClick(btnItem) {
      if (btnItem.name === '新增') {
        this.dialogConf.show = true
      }
    },
    myTableOptClick(optItem, row) {
      try {
        if (optItem.name === '代码生成') {
          this.$router.push({
            path: '/db/code',
            query: { name: this.searchModel.name, tableName: row.tableName }
          })
        }
      } catch (e) {
        console.log(e)
      }
    },
    async mySearchBtnClick(btnItem) {
      if (this.searchModel.name == null) {
        return
      }
      if (btnItem != null) {
        btnItem.loading = true
      }
      await this.getInitData(this.searchModel)
      if (btnItem != null) {
        btnItem.loading = false
      }
    },
    async getInitData(params) {
      try {
        if (params == null) {
          return
        }
        params = delFormNullParam(params)
        const data = await this.$axios.post(
          '/db/getTables?size=' +
            this.page.size +
            '&current=' +
            this.page.current,
          params
        )
        this.tableData = data.data
      } catch (e) {
        this.tableData = { records: [] }
        console.log(e)
      }
    },
    closed() {
      this.dialogConf.show = false
      this.$refs.addForm.resetFields()
    },
    async addBtnClick(btnItem) {
      try {
        if (btnItem.name === '提交') {
          let validFlag = false
          this.$refs.addForm.$refs.form.validate((valid) => {
            validFlag = valid
          })
          if (validFlag) {
            const params = Object.assign({}, this.addModel)
            btnItem.loading = true
            if (this.dialogConf.title === '新增') {
              const data = await this.$axios.post('/enjoy/add', params)
              this.$message.success(data.msg)
            } else {
              const data = await this.$axios.post('/enjoy/update', params)
              this.$message.success(data.msg)
            }
            this.closed()
            this.getInitData()
          }
        } else if (btnItem.name === '取消') {
          this.closed()
        }
      } catch (e) {
        console.log(e)
      } finally {
        btnItem.loading = false
      }
    },
    currentChange(current) {
      this.page.current = current
      this.mySearchBtnClick(this.searchBtnConf.buttons[0])
    },
    sizeChange(size) {
      this.page.size = size
      this.mySearchBtnClick(this.searchBtnConf.buttons[0])
    }
  }
}
</script>

<style scoped></style>
